<template>
    <div>
    <el-dialog :visible.sync="show.centerDialogVisible"  :before-close="handleClose" center :title="!show.title?titleAdd:titleUpdate" width="40%">
        <el-form  label-position="right" label-width="180px" :model="updateinfo" :rules="rules" ref="updateinfo">
            <el-form-item label="姓名:" prop="name">
                <el-input class="Iwidth" v-model="updateinfo.name"></el-input>
            </el-form-item>
            <el-form-item label="登录账号:" prop="username">
                <el-input class="Iwidth" v-model="updateinfo.username"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
                <el-input class="Iwidth"  type='password' v-model="updateinfo.password"></el-input>
            </el-form-item>
            <el-form-item label="单位:" prop="department">
                <el-input class="Iwidth" v-model="updateinfo.department"></el-input>
            </el-form-item>
            <el-form-item label="手机号:" prop="phone">
                <el-input class="Iwidth" v-model="updateinfo.phone"></el-input>
            </el-form-item>
            <!-- <el-form-item label="头像:" prop="image">
                <el-input class="Iwidth" v-model="show.updateinfo.image"></el-input>
            </el-form-item> -->
            <el-form-item label="备注:" prop="des">
                <el-input class="Iwidth" v-model="updateinfo.des"></el-input>
            </el-form-item>
            <el-form-item label="状态:" prop="status">
              <el-select v-model="updateinfo.status">
                <el-option label="开启" value="1"></el-option>
                <el-option label="关闭" value="2"></el-option>
            </el-select>
            </el-form-item>
        </el-form><span slot="footer" class="dialog-footer">
            <el-button @click="show.centerDialogVisible = false" size="mini">取 消</el-button>
            <el-button v-show="show.showUpdate" @click="update(1)" size="mini" type="primary">修 改</el-button>
            <el-button v-show="!show.showUpdate" @click="update(2)" size="mini" type="primary">保 存</el-button>
        </span>
    </el-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      titleAdd: '添加用户',
      titleUpdate: '修改用户信息',
      info: {},
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        department: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // password: [{ required: true, message: '不能为空', trigger: 'blur' }],
        username: [{ required: true, message: '不能为空', trigger: 'blur' }],
        phone: [{ required: true, message: '不能为空', trigger: 'blur' }],
        des: [{ required: true, message: '不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  props: {
    show: {
      type: Object
    }
  },
  computed: {
    ...mapGetters([
      'updateinfo'
    ])
  },
  methods: {
    handleClose(done) {
      this.$store.dispatch('clear').then(() => {
        done()
      }).then(() => {
      })
    },
    update(i) {
      this.$refs.updateinfo.validate((valid) => {
        if (valid) {
          if (i === 1) { // 修改按钮
            this.$store.dispatch('dialogUpdate').then(() => {
              // this.$store.dispatch('GetUerList').then(() => {
              // }).catch(error => {
              //   console.log('00000' + error)
              // })
            })
          } else if (i === 2) {
            // console.log(i)// 保存按钮
            this.$store.dispatch('addUser').then(() => {
              // this.$store.dispatch('GetUerList').then()
            })
          }
        }
      })
    }
  }
}
</script>

<style>

</style>

